<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能相关性表</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />

    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            width: 98%;
        }

        table {
            width: 98%;
            border-collapse: collapse;
            {#margin-top: 8px;#}
        }

        table,
        th,
        td {
            border: 1px solid #ddd;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="funcRelationTable" lay-filter="funcRelationTable"></table>
        </div>
    </div>
    <script type="text/html" id="toolbarHeader">
       <form class="layui-form" id="filterForm">
                <div class="layui-form-item-1">
{#                    <label class="layui-form-label">选择功能域</label>#}
                    <div class="layui-input-inline">
                        <select name="func_domain"  lay-search>
                            <option value="">基于ITEM过滤</option>
                            <!-- 这里将动态生成选项 -->
                        </select>
                    </div>
                    <button class="layui-btn  layui-btn-sm" lay-submit lay-filter="filterSubmit">
                        <i class="layui-icon layui-icon-search"></i>过滤</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm" id="clearFilter">取消过滤</button>
                    <button type="button" class="layui-btn layui-btn-sm" onclick="addFunction()">
                        <i class="layui-icon layui-icon-add-1"></i> 添加功能</button>
                    <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" onclick="update_item_table()" >
                        <i class="layui-icon layui-icon-refresh"></i> 更新ITEM表 </button>
                    <!-- 隐藏文件选择按钮 -->
                    <input type="file" id="funcRelationFile" accept=".xlsx, .xls" style="display: none;">
                    <button type="button" class="btn layui-btn layui-bg-blue  layui-btn-sm" onclick="triggerFileUpload()">
                        <i class="layui-icon" style="font-size: 16px; color: whitesmoke;">&#xe656;</i> 批量导入 </button>
                </div>
            </form>
    </script>
    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/js/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            var windowHeight = window.innerHeight;
            var tableHeight = windowHeight - 30; // 减去过滤表单的高度和一些边距

            // 渲染表格
            var tableIns = table.render({
                elem: '#funcRelationTable',
                url: '/get_func_relations',
                height: tableHeight,
                toolbar: '#toolbarHeader',
                page: true,
                limit: 50,
                limits: [50, 100, 500],
                even: true,
                cols: [[
                    { field: 'id', title: 'ID', width: 60, align: 'center', hide: true },
                    { type: 'numbers', title: '序号', width: 60, align: 'center' }, // 添加'序号'列
                    { field: 'name', title: '功能名称', width: 190, align: 'center' },
                    { field: 'desc', title: '功能说明', width: 220, align: 'left' },
                    { field: 'item', title: 'ITEM', width: 120, align: 'center' },
                    { field: 'system', title: '整车子系统', width: 120, align: 'center' },
                    { field: 'data_flow', title: '基本数据流', width: 300, align: 'left' },

                    { field: 'bool_ee', title: '电子电气EE架构下的组件', width: 130, align: 'center' },
                    { field: 'bool_safe', title: '影响车辆功能安全', width: 130, align: 'center' },
                    { field: 'bool_userdata', title: '收集或处理用户或者敏感数据', width: 130, align: 'center' },
                    { field: 'bool_network', title: '基于网络化的零部件实现车辆功能', width: 130, align: 'center' },
                    { field: 'result', title: '网络安全相关项', width: 120, align: 'center' },
                    { field: 'contact_person', title: '责任人', width: 100, align: 'left' },
                    { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
                ]]
            });

            // 从后端获取功能域选项
            $.get('/get_filter_items', function (data) {
                var $select = $('#filterForm select[name="func_domain"]');
                data.forEach(function (item) {
                    $select.append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render('select'); // 重新渲染下拉框
            });

            // 监听过滤表单提交事件
            form.on('submit(filterSubmit)', function (data) {
                // 获取过滤条件
                var filterData = data.field;
                // 重新渲染表格，传递过滤参数
                tableIns.reload({
                    where: filterData,
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                });
                return false; // 阻止表单默认提交行为
            });

            // 监听取消过滤按钮点击事件
            $('#clearFilter').on('click', function () {
                // 清除过滤条件
                $('#filterForm select[name="func_domain"]').val('');
                form.render('select'); // 重新渲染下拉框
                // 重新渲染表格，显示所有数据
                tableIns.reload({
                    where: {},
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                });
            });

            // 获取渲染后的表格元素，这里利用了layui的相关机制找到对应的DOM元素
            var $table = $('#funcRelationTable').next('table');
            // 为表格的单元格绑定双击事件
            $table.find('td').on('dblclick', function () {
                // 获取当前双击的单元格的文本内容
                var cellContent = $(this).text();
                // 使用layer插件弹出提示框显示内容，你可以根据需求调整提示框样式等属性
                layer.alert(cellContent, {
                    title: '单元格内容'
                });
            });

            // 添加ECU特性
            window.addFunction = function () {
                layer.open({
                    title: '添加新功能',
                    type: 2,
                    content: '/addFunctionForm',
                    area: ['630px', '600px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('functionForm');
                        var formData = new FormData(submitForm);
                        fetch('/add_function', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('funcRelationTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 监听工具条
            table.on('tool(funcRelationTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑功能',
                        type: 2,
                        content: '/editFunctionForm?id=' + data.id,
                        area: ['630px', '600px'],
                        btn: ['确认', '取消'],
                        yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index];
                            var submitForm = iframeWindow.document.getElementById('functionForm');
                            var formData = new FormData(submitForm);
                            fetch('/edit_function', {
                                method: 'POST',
                                body: formData
                            })
                            .then(response => response.json())
                            .then(data => {
                                layer.msg(data.msg);
                                table.reload('funcRelationTable');
                                layer.close(index);
                            });
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                        }
                    });
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除该功能吗？', function (index) {
                        $.post('/delete_function', { id: data.id }, function (res) {
                            if (res.status === 'success') {
                                layer.msg('删除成功');
                                table.reload('funcRelationTable');
                            } else {
                                layer.msg('删除失败');
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
        function update_item_table() {
            {
                // 显示加载层
                var loadIndex = layer.load(2, {
                    shade: [0.3, '#000'] // 加载层的遮罩效果
                });

                // 调用后端接口
                fetch('/update_item', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    // 关闭加载层
                    layer.close(loadIndex);

                    // 显示后端返回的消息
                    layer.msg(data.msg);
                })
                .catch(error => {
                    // 关闭加载层
                    layer.close(loadIndex);

                    // 显示错误消息
                    layer.msg('请求失败，请稍后再试');
                    console.error('Error:', error);
                });
            }
        }
        // 触发文件上传
        function triggerFileUpload() {
            // 触发文件选择对话框
            document.getElementById('funcRelationFile').value = '';
            document.getElementById('funcRelationFile').click();
            {#console.log('>>打开对话框');#}
            // 监听文件选择后的上传事件
            document.getElementById('funcRelationFile').onchange = function () {
                var file = this.files[0];
                if (!file) {
                    alert('请选择要导入的功能相关性文件');
                    return;
                }
                {#console.log('>>file:',file);#}
                var formData = new FormData();
                formData.append('file', file);
                formData.append('tableName', 'FuncRelationTable');

                // 显示加载层
                var loadIndex = layer.load(2, {
                    shade: [0.3, '#000']
                });
                console.log('Start Upload: ' + loadIndex);
                fetch('/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    layer.close(loadIndex); // 关闭加载层
                    layer.msg(data.msg); // 显示上传结果
                    if (data.status === 'success') {
                        // 使用 layui.table.reload 刷新表格
                        layui.use(['table'], function () {
                            var table = layui.table;
                            table.reload('funcRelationTable', {
                                url: '/get_func_relations', // 重新请求数据的URL
                                page: {
                                    curr: 1 // 重新从第 1 页开始
                                }
                            });
                        });
                    }
                })
                .catch(error => {
                    layer.close(loadIndex); // 关闭加载层
                    console.error('Error:', error);
                    layer.msg('上传失败');
                });
                {#console.log('End Upload: ' + loadIndex);#}
            };
        }
    </script>

    <!-- 工具条模板 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>

</html>